<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>歌手管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/lib/Hui-iconfont/1.0.7/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/lib/icheck/icheck.css" />
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="<%=basePath %>css/static/h-ui.admin/css/style.css" />
	<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.2.js"></script> 
	<script type="text/javascript" src="<%=basePath %>css/lib/layer/2.1/layer.js"></script> 
	<script type="text/javascript" src="<%=basePath %>css/static/h-ui/js/H-ui.js"></script> 
	<script type="text/javascript" src="<%=basePath %>css/static/h-ui.admin/js/H-ui.admin.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/ajaxfileupload.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#uploadfile").change(function(){
				var objUrl = getObjectURL(this.files[0]);
				$("#preview").attr("src",objUrl);
			});
			$("#upload").click(function(){
			//alert("hello");
				$.ajaxFileUpload({
					url:'<%=basePath%>/test02/upload',
					type:'post',
					dataType:'json',
					fileElementId:'uploadfile',
					secureuri: false,
					success:function(data){
						$("#rollbackcode").attr("value",data);
					},
					error:function(){
						alert("error");
					}
				});
			});
		});
		function getObjectURL(file) {
			var url = null ; 
			if (window.createObjectURL!=undefined) { // basic
				url = window.createObjectURL(file) ;
			} else if (window.URL!=undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file) ;
			} else if (window.webkitURL!=undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file) ;
			}
			return url ;
		}
	</script> 
  </head>
  
  <body>
	<div class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-article-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>歌手姓名：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<input type="text" class="input-text" value="" placeholder="" id="" name=""/>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>歌手别名：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<input type="text" class="input-text" value="" placeholder="" id="" name=""/>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>歌手性别：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<input type="text" class="input-text" value="" placeholder="" id="" name=""/>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>歌手标签：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<input type="text" class="input-text" value="" placeholder="" id="" name=""/>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">歌手简介：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<textarea name="" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true"></textarea>
			</div>
		</div>
		
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>歌手照片：</label>
			<div class="formControls col-xs-8 col-sm-5">
					<input id="uploadfile" type="file" name="file"/>
					<input id="upload" type="button" class="btn btn-primary radius ml-10" value="上传图片"/>
			</div>
			
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<label class="radius ml-10">图片预览</label>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<img id="preview" src="" style="width:200px;height:200px"/>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>返回代码：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<input type="text" class="input-text" readonly="readonly" id="rollbackcode" name=""/>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 上传歌手信息</button>
			</div>
		</div>
	</form>
	</div>
  </body>
</html>
